<script>
import store from "../../../store"
import { dictActionType } from "../../../store/modules/dict"
import request from "../../../utils/request"
import { showModal, showToast } from "../../../utils"
import { userActionType } from "../../../store/modules/user"

export default {
  name: "index",
  data() {
    return {
      form: {
        exchangeCode: "",
      },
      posterImage: "",
    }
  },
  methods: {
    submit() {
      if (!this.form.exchangeCode) {
        showToast.default("请输入兑换码")
        return
      }
      request({
        url: "exchangeManage/exchange",
        data: this.form,
        errorHandle: true,
        showLoading: true,
      }).then(async () => {
        await showModal({
          content: "兑换成功",
          showCancel: false,
        })
        //刷新用户信息
        await store.dispatch(userActionType.action.refreshUserInfo)
        uni.navigateBack()
      })
    },
  },
  async onLoad() {
    //处理兑换码海报
    const sysParam = await request({
      url: "sysPam/getSysParam",
      data: {
        pamCode: "showExchangeCodePagePoster",
      },
      errorHandle: true,
    })
    if (sysParam.pamValue === "是") {
      this.posterImage = "https://kou.gdzmtech.com:1443/file-service/deer/pic/ac2e50c22a1a4d08b626c39e970c8ec9.png"
    }
  },
}
</script>

<template>
  <view class="page">
    <view class="form-container">
      <view class="input-container">
        <input type="text" class="input" v-model="form.exchangeCode" placeholder="请输入兑换码" />
      </view>
      <view class="submit" @click="submit">立即兑换</view>
    </view>
    <view class="divider"></view>
    <image class="poster" mode="widthFix" :src="posterImage"></image>
  </view>
</template>

<style scoped lang="scss">
.page {
  .form-container {
    padding: 60rpx;

    .input-container {
      height: 100rpx;
      display: flex;
      align-items: center;
      background: var(--gray-background-color);
      border-radius: 50rpx;
      padding: 0 30rpx;

      .input {
        width: 100%;
        text-align: center;
      }
    }

    .submit {
      margin: {
        top: 60rpx;
        left: auto;
        right: auto;
      }
      width: 50%;
      height: 80rpx;
      background: var(--theme-color);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      border-radius: 40rpx;
    }
  }

  .divider {
    height: 30rpx;
    background: var(--gray-background-color);
  }

  .poster {
    width: 100%;
  }
}
</style>
